{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto;
        margin: 10px 0;
    }
    .dataTable {
        min-width: 1300px;
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;
        white-space: nowrap;
        text-align: center;
    }
    .sortable {
        cursor: pointer;
        position: relative;
    }
    
    /* 列宽调整 */
    .col-recordid { width: 5%; }
    .col-userid { width: 8%; }
    .col-username { width: 10%; }
    .col-userstatus { width: 8%; }
    .col-date { width: 10%; }
    .col-bodyindex { width: 8%; }
    .col-blood { width: 10%; }
    .col-notes { width: 15%; }
    .col-operate { width: 8%; }

    /* 工具栏容器样式 */
    .toolbar-container {
        display: flex;
        align-items: center; /* 垂直居中对齐 */
        margin-bottom: 10px;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* 按钮与筛选框对齐核心样式 */
    .toolbar-container .btn,
    .toolbar-container .form-control {
        height: 30px; /* 统一高度 */
        padding: 6px 12px; /* 统一内边距 */
        font-size: 14px; /* 统一字体大小 */
        box-sizing: border-box; /* 确保尺寸计算包含边框 */
        vertical-align: middle; /* 垂直居中 */
    }

    /* 搜索框样式保持与其他元素协调 */
    .search-group {
        display: flex;
        align-items: center;
    }
    .search-group .form-control {
        border-radius: 0;
        border-right: none;
    }
    .search-group .search-btn {
        height: 30px;
        padding: 0 12px;
        border: 1px solid #ccc;
        border-left: none;
        background-color: #fff;
        cursor: pointer;
    }
</style>

<script>
    // 全选/取消全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selallCheckbox = document.getElementById('selall');
        const rowCheckboxes = document.querySelectorAll('input[name="ids"]');
        
        selallCheckbox.addEventListener('change', function() {
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = selallCheckbox.checked;
                if (checkbox.checked) {
                    checkbox.parentElement.classList.add('checked');
                } else {
                    checkbox.parentElement.classList.remove('checked');
                }
            });
        });
        
        rowCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateSelallStatus);
        });
        
        function updateSelallStatus() {
            const allChecked = Array.from(rowCheckboxes).every(checkbox => checkbox.checked);
            selallCheckbox.checked = allChecked;
            if (allChecked) {
                selallCheckbox.parentElement.classList.add('checked');
            } else {
                selallCheckbox.parentElement.classList.remove('checked');
            }
        }
    });

    function doDel(url) {
        if (confirm("确定要删除这条数据吗？")) {
            window.location.href = url;
        }
    }
</script>

<!-- 内容头部 -->
<section class="content-header">
    <h1>
        健康数据管理
        <small>用户健康记录列表</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">健康数据管理</a></li>
        <li class="active">健康记录列表</li>
    </ol>
</section>

<!-- 正文区域 -->
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">用户健康记录列表</h3>
        </div>
        <div class="box-body">
            <!-- 工具栏 -->
            <div class="toolbar-container">
                <!-- 添加记录按钮 -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default">
                        <a href="{% url 'myadmin_userbodyrecords_add' %}" style="color: inherit;"><i class="fa fa-plus"></i> 添加记录</a>
                    </button>
                </div>

                <!-- 状态筛选下拉框 -->
                <div class="form-group" style="margin: 0;"> <!-- 移除默认margin避免错位 -->
                    <form action="{% url 'myadmin_userbodyrecords_index' 1 %}" method="get" id="statusForm">
                        <select name="status" class="form-control" onchange="document.getElementById('statusForm').submit()">
                            <option value="">所有用户状态</option>
                            <option value="1" {% if current_status == '1' %}selected{% endif %}>正常用户</option>
                            <option value="2" {% if current_status == '2' %}selected{% endif %}>禁用用户</option>
                            <option value="6" {% if current_status == '6' %}selected{% endif %}>管理员用户</option>
                            <option value="9" {% if current_status == '9' %}selected{% endif %}>已删除用户</option>
                        </select>
                        <!-- 保留其他搜索参数 -->
                        {% if request.GET.keyword %}
                            <input type="hidden" name="keyword" value="{{ request.GET.keyword }}">
                        {% endif %}
                        {% if request.GET.sort %}
                            <input type="hidden" name="sort" value="{{ request.GET.sort }}">
                        {% endif %}
                        {% if request.GET.order %}
                            <input type="hidden" name="order" value="{{ request.GET.order }}">
                        {% endif %}
                    </form>
                </div>

                <!-- 搜索框 -->
                <form method="get" action="{% url 'myadmin_userbodyrecords_index' 1 %}" class="input-group input-group-sm" style="width: 300px;">
                    <input type="text" name="keyword" class="form-control pull-right" 
                        placeholder="用户ID/记录日期" 
                        value="{{ request.GET.keyword|default:'' }}">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                        {% if request.GET.keyword %}
                        <a href="{% url 'myadmin_userbodyrecords_index' 1 %}{% if request.GET.status %}?status={{ request.GET.status }}{% endif %}" class="btn btn-default"><i class="fa fa-times"></i></a>
                        {% endif %}
                    </div>
                <!-- 保留状态筛选参数 -->
                    {% if request.GET.status %}
                        <input type="hidden" name="status" value="{{ request.GET.status }}">
                    {% endif %}
                    {% if request.GET.sort %}
                        <input type="hidden" name="sort" value="{{ request.GET.sort }}">
                    {% endif %}
                    {% if request.GET.order %}
                        <input type="hidden" name="order" value="{{ request.GET.order }}">
                    {% endif %}
                </form>
            </div>

            <div class="table-box">
                <!-- 数据列表 -->
                <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                    <thead>
                        <tr>
                            <th style="width: 5%; text-align: center;">
                                <div style="display: inline-flex; align-items: center; gap: 5px;">
                                    <input id="selall" type="checkbox" class="icheckbox_square-blue" style="width: 16px; height: 16px;">
                                    <span style="font-size: 14px;">全选</span>
                                </div>
                            </th>
                            <th class="sortable col-recordid">
                                <a href="?sort=record_id&order={% if request.GET.sort == 'record_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=record_id'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    记录ID{% if request.GET.sort == 'record_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable col-userid">
                                <a href="?sort=user_id&order={% if request.GET.sort == 'user_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=user_id'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    用户ID{% if request.GET.sort == 'user_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="col-username">用户名</th>
                            <th class="sortable col-userstatus">
                                <a href="?sort=user__status&order={% if request.GET.sort == 'user__status' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=user__status'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    用户状态{% if request.GET.sort == 'user__status' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable col-date">
                                <a href="?sort=record_date&order={% if request.GET.sort == 'record_date' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}&{{ request.GET|urlencode|cut:'&sort=record_date'|cut:'&order=asc'|cut:'&order=desc' }}">
                                    记录日期{% if request.GET.sort == 'record_date' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="col-bodyindex">体重(kg)</th>
                            <th class="col-bodyindex">体脂率(%)</th>
                            <th class="col-bodyindex">肌肉量(kg)</th>
                            <th class="col-bodyindex">水分率(%)</th>
                            <th class="col-bodyindex">骨量(kg)</th>
                            <th class="col-blood">收缩压(mmHg)</th>
                            <th class="col-blood">舒张压(mmHg)</th>
                            <th class="col-blood">血糖(mmol/L)</th>
                            <th class="col-notes">备注</th>
                            <th class="col-operate">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for vo in ubrlist %}
                        <tr>
                            <td><input name="ids" type="checkbox"></td>
                            <td>{{ vo.record_id }}</td>
                            <td>{{ vo.user_id }}</td>
                            <td>{{ vo.user.username|default:'未知用户' }}</td>
                            <td>
                                {% if vo.user.status == 1 %}
                                    <span style="color:green">正常</span>
                                {% elif vo.user.status == 2 %}
                                    <span style="color:red">禁用</span>
                                {% elif vo.user.status == 6 %}
                                    <span style="color:blue">管理员</span>
                                {% elif vo.user.status == 9 %}
                                    <span style="color:orangered">已删除</span>
                                {% else %}
                                    <span style="color:orange">未知</span>
                                {% endif %}
                            </td>
                            <td>{{ vo.record_date }}</td>
                            <td>{{ vo.weight|default:'-' }}</td>
                            <td>{{ vo.body_fat_percentage|default:'-' }}</td>
                            <td>{{ vo.muscle_mass|default:'-' }}</td>
                            <td>{{ vo.water_percentage|default:'-' }}</td>
                            <td>{{ vo.bone_mass|default:'-' }}</td>
                            <td>{{ vo.blood_pressure_systolic|default:'-' }}</td>
                            <td>{{ vo.blood_pressure_diastolic|default:'-' }}</td>
                            <td>{{ vo.blood_sugar|default:'-' }}</td>
                            <td title="{{ vo.notes|default:'' }}">{{ vo.notes|truncatechars:10|default:'-' }}</td>
                            <td>
                                <a type="button" href="{% url 'myadmin_userbodyrecords_edit' vo.record_id %}" class="btn bg-primary btn-xs">
                                    <i class="fa fa-pencil"></i> 编辑
                                </a>
                                <a type="button" onclick="doDel('{% url 'myadmin_userbodyrecords_delete' vo.record_id %}')" class="btn bg-danger btn-xs">
                                    <i class="fa fa-trash"></i> 删除
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="box-footer">
                <div class="box-tools pull-right">
                    <ul class="pagination">
                        <li><a href="{% url 'myadmin_userbodyrecords_index' pIndex|add:-1 %}?{{ request.GET.urlencode }}">&laquo;</a></li>
                        {% for p in plist%}
                        <li {% if p == pIndex %}class="active"{% endif %}><a href="{% url 'myadmin_userbodyrecords_index' p %}?{{ request.GET.urlencode }}">{{p}}</a></li>
                        {% endfor %}
                        <li><a href="{% url 'myadmin_userbodyrecords_index' pIndex|add:1 %}?{{ request.GET.urlencode }}">&raquo;</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}